<template>
    <div class="page inspectionApply-page inspectionApplyRecords-page" data-page="inspectionApplyRecords" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">查岗结果</div>
        </div>
        <div class="page-content inspectionApplyRecords-content">
            <div class="little-title">应答人员及当时定位</div>
            <div class="inspect-map">
                <div id="rMap"></div>
            </div>
            <div class="little-title">应答人员</div>
            <div class="inspection-people" id="inspectPerson"></div>
            <div class="little-title">未应答人员</div>
            <div class="inspection-people" id="unInspectPerson"></div>
            <div class="little-title">查岗时间</div>
            <p id="inititalTime">-</p>
            <div class="little-title">应答间隔</div>
            <p id="replyTime">-</p>
        </div>   
    </div>
</template>

<script>
    return {
        data: function () {
            return {
                id:this.$route.params.inspectId,
                map:null
            }
        },
        methods: {
            initrMap:function(){
                var self = this;
                self.map = new BMap.Map('rMap',{
                   enableMapClick:false //关闭底图可点功能
                });
                var point = null;
                var lon = app.longitude?app.longitude:118.523111;
                var lat = app.latitude?app.latitude:32.23126;
                self.map.centerAndZoom(new BMap.Point(lon, lat),15); 
                self.map.enableScrollWheelZoom(true); //允许缩放
            },
            // result:1 应答
            // result:12 未应答
            getInspectionDetail:function(){
                var self = this;
                jQuery("#inspectPerson #unInspectPerson").empty();
                
                Dao.getRecordsByInspectId_ajax({
                    inspectId:self.id,
                },function(data){
                    if(data){
                        $("#inititalTime").html(common.transNullundefinedToline(data.inititalTime));  //应答时间
                        $("#replyTime").html(common.transNullundefinedToline(data.replyTime)+"分钟");  //应答间隔
                        if(data.inspectRecords.length > 0){
                            self.map.clearOverlays(); // 先清除地图上的点
                            for(var i=0;i<data.inspectRecords.length;i++){
                                let oneData = data.inspectRecords[i];
                                //应答人员
                                if(oneData.result == 4){
                                    $("#inspectPerson").append(`<span id="inspectPersonPoint_`+ oneData.id+`">`+common.transNullundefinedToline(oneData.byCheckName)+`</span>`);
                                    jQuery('#inspectPersonPoint_'+ oneData.id).off('click').click(function (e) {
                                        self.fixpoint(oneData);
                                    })
                                }else{
                                    $("#unInspectPerson").append(`<span>`+common.transNullundefinedToline(oneData.byCheckName)+`</span>`);
                                }
                                self.addInspectPersonMarker(oneData);
                            }
                            //如果没有值则显示无
                            if(jQuery("#inspectPerson").children().length == 0){
                                jQuery("#inspectPerson").html("无");
                            }
                            if(jQuery("#unInspectPerson").children().length == 0){
                                jQuery("#unInspectPerson").html("无");
                            }
                        }else{
                            jQuery("#inspectPerson").html("无");
                            jQuery("#unInspectPerson").html("无");
                        }
                    }
                });
            },
            fixpoint(data){
                if (data && data.longitude && data.latitude) {
                    var self = this;
                    self.map.centerAndZoom(new BMap.Point(data.longitude, data.latitude), 19);
                }
            },
            addInspectPersonMarker:function(data){
                var self = this;
                if(data && data.longitude && data.latitude){
                    let dutyPoint = new BMap.Point(data.longitude, data.latitude);
                    //创建用户头像标注
                    let myIcon = new BMap.Icon('/ilink-app-h5-zd/static/img/rdspFile_1552981560146.png',
                        new BMap.Size(35, 55), // 视窗大小
                        {
                            //anchor: new BMap.Size(26, 32),
                            //imageSize: new BMap.Size(26, 32), // 引用图片实际大小
                            //imageOffset:new BMap.Size(-13,-16)  // 图片相对视窗的偏移
                        });
                    let dutyMarker = new BMap.Marker(dutyPoint, { icon: myIcon });  // 创建标注*/
                    let markerLabelScore = new BMap.Label("<div class='baiduMark-duty'>" + (data.byCheckName) + "</div>", {
                        offset: new BMap.Size(-35, -50),
                        position: dutyPoint
                    });
                    markerLabelScore.setStyle({
                        width: 'auto',
                        height: 'auto',
                        color: '#fff',
                        fontSize: '16px',
                        backgroundColor: 'none',
                        border: 'none',
                        borderRadius: "4px",
                        textAlign: "left",
                        padding: "15px",
                        lineHeight: "15px"
                    });
                    markerLabelScore.setZIndex(10000);
                    self.map.addOverlay(markerLabelScore);
                    self.map.addOverlay(dutyMarker);
                    self.map.centerAndZoom(dutyPoint, 18)
                }
            },
            // backFunc:function() {
            //     var self = this;
            //     self.$root.backToTab();
            //     app.view.current.el.f7View.router.currentPageEl.f7Component.getgetRecordData();
            //     app.view.current.el.f7View.router.currentPageEl.f7Component.getInspectRecords();
            // }
        },
        on:{
            pageInit: function(e, page) {
                var self = this;
                self.initrMap();
                self.getInspectionDetail();
            }
        }
    }
</script>